<template>
  <div class="install-notice" :style="{ height: $store.oj.systemParams.screenHeight * 0.8 + 'px' }">
    <div class="i-header">
      <div class="i-h-title"><i class="iconfont icon-tongzhi"></i>通知管理</div>
    </div>
    <div class="i-to">
      <div class="i-search">
        <div class="i-tip">提示：定时推送系统通知</div>
        <n-button class="i-s-btn" size="small" round type="success" @click="
          show = true;
        isUser();
        "><i class="iconfont icon-zengjia"></i>发布通知</n-button>
      </div>

      <div class="i-search">
        <el-select v-model="typeVal" class="i-select" placeholder="公告状态" style="width: 100px">
          <el-option v-for="item in statusVal" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input class="i-s-input" placeholder="搜索通知标题" round size="small" v-model="searchVal">
          <template #suffix>
            <i class="iconfont icon-sousuo" @click="updateSearchParams"></i>
          </template>
        </el-input>
      </div>
    </div>
    <div class="i-table">
      <el-table :data="noticeList.records" size="small" stripe>
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="creatorName" label="发布人" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="center">
          <template #default="scoped">
            <n-ellipsis style="max-width: 130px">
              {{ scoped.row.title }}
            </n-ellipsis>
          </template></el-table-column>
        <el-table-column prop="content" label="内容" align="center">
          <template #default="scoped">
            <n-ellipsis style="max-width: 110px">
              {{ scoped.row.content }}
            </n-ellipsis>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="时间" align="center" min-width="150">
          <template #default="scoped">
            <div class="d-t-time">
              <div class="time" v-if="scoped.row.publishTime !== null">
                推送时间：{{ scoped.row.publishTime }}
              </div>
            </div>
            <div class="d-t-time">
              <div class="time">更新时间：{{ scoped.row.updateTime }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="isPush" label="是否已推送" align="center">
          <template #default="scoped">
            <n-tag class="tag" type="warning" v-show="!scoped.row.isPush">
              未推送
            </n-tag>
            <n-tag class="tag" type="success" v-show="scoped.row.isPush">
              已推送
            </n-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scoped">
            <div class="i-t-comparation">
              <div>
                <el-tooltip content="更新通知" placement="top">
                  <n-button class="nbtn" size="tiny" type="info" @click="updateNotice(scoped.row)"><i
                      class="iconfont icon-bianji"></i></n-button>
                </el-tooltip>
                <n-popconfirm positive-text="确认" negative-text="取消" @positive-click="deleteNotice(scoped.row.id)">
                  <template #trigger>
                    <n-tooltip trigger="hover">
                      <template #trigger>
                        <n-button class="nbtn" size="tiny" type="error"><i class="iconfont icon-shanchu"></i></n-button>
                      </template>
                      删除
                    </n-tooltip>
                  </template>
                  确认删除通知？
                </n-popconfirm>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="i-footer">
      <el-pagination small layout="sizes, prev, pager, next" :page-count="parseInt(noticeList.pages)"
        v-model:current-page="pageNum" v-model:page-size="pageSize" @current-change="changePage"
        @size-change="changeSize" :page-sizes="[10, 20, 30]" />
    </div>
    <el-drawer v-model="show" :size="'100%'" direction="ttb" :auto-focus="false" :show-close="false">
      <template #header>
        <div class="header">
          <div class="header-title">
            <el-form>
              <el-form-item prop="title">
                <el-input id="title" class="title" v-model="title" placeholder="此处输入通知标题..." size="large" />
              </el-form-item>
            </el-form>
          </div>
          <div class="doing">
            <n-button type="error" size="tiny" @click="
              show = false;
            setUp();
            ">
              <template #icon>
                <i class="iconfont icon-quxiao"></i>
              </template>
              取消发布
            </n-button>
            <n-button type="primary" size="tiny" @click="deboundPostNotice" v-show="!isUpdate">
              <template #icon>
                <i class="iconfont icon-fabu-copy1-copy"></i>
              </template>
              发布通知
            </n-button>
            <n-button type="primary" size="tiny" @click="deboundUpdateNotice" v-show="isUpdate">
              <template #icon>
                <i class="iconfont icon-fabu-copy1-copy"></i>
              </template>
              更新通知
            </n-button>
          </div>
        </div>
      </template>
      <div>
        <div class="notice-content">通知内容</div>
        <markdown-vue ref="content" :detailContent="content" :height="'300px'"></markdown-vue>
      </div>
      <div class="post">
        <div class="postType">发送类型:</div>
        <div class="type">
          <n-radio :checked="checkedValue === true" value="立即发送" name="basic-demo" @change="changeType(true)">
            立即发送
          </n-radio>
          <n-radio :checked="checkedValue === false" value="定时发送" name="basic-demo" @change="changeType(false)">
            定时发送
          </n-radio>
        </div>
      </div>
      <div class="post-time" v-show="!checkedValue">
        <div>发送时间:</div>
        <div>
          <el-date-picker v-model="time" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择发送时间" :default-time="new Date()" :disabled-date="disabledDateFn" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import markdownVue from "@/components/ojComponents/markdown/markdown.vue"

import {
  postNoticeAPI,
  getNoticeAPI,
  updateNoticeAPI,
  delNoticeAPI,
} from "@/api/adminAPI/adminAPI.js"
import { ElMessage } from "element-plus"

export default {
  data () {
    return {
      searchVal: "",
      noticeList: {},
      show: false,
      content: "",
      title: "",
      isShow: true,
      checkedValue: true,
      time: "",
      deboundTime: null,
      isUpdate: false,
      id: null,
      pageNum: 1,
      pageSize: 10,
      typeVal: "",
      statusVal: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "未推送",
        },
        {
          value: "1",
          label: "已推送",
        },
      ],
    }
  },
  watch: {
    searchVal () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.getNoticeAPI()
      }, 300)
    },
    typeVal () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.getNoticeAPI()
      }, 300)
    },
  },
  methods: {
    //用于日期时间选择器中的限制选择日期的用法
    disabledDateFn (date) {
      if (date.getTime() < new Date().getTime()) {
        return true
      }
      return false
    },
    //判断是否为管理员
    isUser () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
    },
    //重置数据
    setUp () {
      this.$refs.content.content = ""
      this.content = ""
      this.title = ""
      this.time = ""
      this.checkedValue = true
      this.isUpdate = false
    },
    //改变立即发布和定时发布的作用
    changeType (val) {
      this.checkedValue = val
    },
    //发布通知，加个防抖
    deboundPostNotice () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.title === "") {
        ElMessage.error("请输入标题")
        return
      }
      if (this.$refs.content.content === "") {
        ElMessage.error("请输入内容")
        return
      }
      if (!this.checkedValue && this.time === "") {
        ElMessage.error("请输入时间")
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.postNoticeAPI()
      }, 300)
    },
    //用于防抖
    deboundUpdateNotice () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.title === "") {
        ElMessage.error("请输入标题")
        return
      }
      if (this.$refs.content.content === "") {
        ElMessage.error("请输入内容")
        return
      }
      if (!this.checkedValue && this.time === "") {
        ElMessage.error("请输入时间")
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.updateNoticeAPI()
      }, 300)
    },
    //用于要更新的数据信息放到数据上
    updateNotice (row) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (row.isPush) {
        ElMessage.warning("通知已发布，无法修改")
        return
      } else {
        this.title = row.title
        this.content = row.content
        this.isUpdate = true
        this.time = row.publishTime
        this.checkedValue = row.immediately
        this.show = true
        this.id = row.id
      }
    },
    //改变页数，请求分页
    changePage (page) {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.pageNum = page
        this.getNoticeAPI()
      }, 300)
    },
    changeSize (size) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.pageSize = size
        this.getNoticeAPI()
      }, 300)
    },
    deleteNotice (id) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.deleteNoticeAPI(id)
      }, 300)
    },
    //删除通知
    async deleteNoticeAPI (id) {
      const data = new FormData()
      data.append("id", id)

      await delNoticeAPI(data).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("删除成功")
          this.getNoticeAPI()
        }
      })
    },
    //更新通知
    async updateNoticeAPI () {
      const data = {
        id: this.id,
        gid: null,
        content: this.$refs.content.content, //内容
        immediately: this.checkedValue, //是否是立即发送的通知
        publishTime: this.time, //定时发送的时间
        title: this.title, //标题
      }
      await updateNoticeAPI(data).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("更新成功")
          this.show = false
          this.setUp()
          this.getNoticeAPI()
        }
      })
    },
    //发布通知
    async postNoticeAPI () {
      const data = {
        gid: null,
        content: this.$refs.content.content, //内容
        immediately: this.checkedValue, //是否是立即发送的通知
        publishTime: this.time, //定时发送的时间
        title: this.title, //标题
      }
      await postNoticeAPI(data).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("发布成功")
          this.show = false
          this.setUp()
          this.getNoticeAPI()
        }
      })
    },
    //获取通知
    async getNoticeAPI () {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        like: this.searchVal,
        status: this.typeVal,
      }
      await getNoticeAPI(data).then((res) => {
        if (res.data.code === 200) {
          this.noticeList = res.data.data
        }
      })
    },
  },
  components: {
    markdownVue,
  },
  mounted () {
    if (this.$store.oj.userData.authLevel === 0) {
      ElMessage.error("无此权限")
      return
    } else {
      this.getNoticeAPI()
    }
  },
}
</script>

<style lang="less" scoped>
.install-notice {
  margin: auto;
  width: 96%;
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;

  .i-header {
    display: flex;

    .i-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .i-to {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid @lineColor;

    .i-search {
      display: flex;
      height: 30px;
      line-height: 30px;
      margin: 10px 0 0 5px;
      padding-bottom: 10px;

      .i-tip {
        font-size: 13px;
        color: red;
      }

      .i-s-btn {
        width: 100px;
        margin: auto 20px;
        height: 20px;
      }

      .i-select {
        margin-right: 10px;
      }

      .i-s-input {
        height: 30px;
        line-height: 30px;
        width: 60%;
      }
    }
  }

  .i-table {
    width: 100%;
    height: 92vh;
    margin: 10px auto 0 auto;

    .i-t-time {
      display: flex;
      flex-direction: column;

      .time {
        color: black;
      }
    }

    .i-t-comparation {
      display: flex;

      div {
        margin: 0 auto;
      }

      .nbtn {
        margin: auto 2px;
      }
    }

    .tag {
      border-radius: 20px;
      height: 20px;
      font-size: 9px;
    }
  }

  .i-footer {
    margin: auto auto 0 auto;
    display: flex;
    justify-content: center;
  }
}

::v-deep(.el-select .el-input) {
  --el-border-radius-base: 8px;
}

::v-deep(.el-input__wrapper) {
  padding: 0px 11px;
}

::v-deep(.el-drawer) {
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  --el-drawer-padding-primary: 30px 20px;
}

::v-deep(.el-drawer__header) {
  display: block;
  padding: 10px 0 0px 0;
  border-bottom: none;
  margin-bottom: 0px;
}

.header {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid rgba(240, 240, 240, 1);

  .doing {
    width: 22%;
    display: flex;

    .n-button {
      margin: 0 5px;
    }

    .is-top {
      margin: 0 5px;

      span {
        font-size: 0.8875em;
        margin-right: 5px;
      }
    }
  }

  .header-title {
    min-width: 80%;
    margin-right: 15px;
    margin-top: 20px;

    .title {
      ::v-deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: text;
        padding: 7px 15px;
        font-size: 16px;

        .el-input__inner {
          font-weight: bold;
          cursor: text !important;
        }
      }
    }
  }
}

.notice-content {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  width: 10%;
  font-weight: 550;
  color: #5e5e5e;
}

.post {
  display: flex;
  align-items: center;

  .postType {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    width: 6%;
    font-weight: 550;
    color: #5e5e5e;
  }

  .type {
    margin-top: 5px;
  }
}

.post-time {
  display: flex;
  align-items: center;

  div {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    width: 6%;
    font-weight: 550;
    color: #5e5e5e;
  }
}
</style>
